import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { staticUrl } from '@/utils'
import { getGoodsDistributionInfo, getGoodsDistributionIndex } from '@/api/goods/distribution'
import './index.scss'

const shareUrl = staticUrl(`/img/index/rmbt-v1/share.png`)
interface State {
  userDistributionInfo: any
  goodsList: any,
  page: number,
  hasMore: boolean
}

export default class DistributionList extends Component<any, State> {

  constructor(props) {
    super(props)
    this.state = {
      userDistributionInfo: {
        banner: {},
        statis: {
          amount: 0, // 成交金额
          number: 0, // 成交订单
          reward: 0  // 预计奖励
        }
      },
      goodsList: [],
      page: 1,
      hasMore: true,
    }
  }

  componentDidMount() {
    // 用户未登录先登录
    // 无门店信息先获取门店信息

    // 获取用户分销信息
    this.getGoodsDistributionInfo()
    // 获取分销列表
    this.getGoodsDistribution()
  }

  // 组件销毁重置数据
  componentWillUnmount() {
    this.setState({
      userDistributionInfo: {
        banner: {},
        statis: {
          amount: 0, // 成交金额
          number: 0, // 成交订单
          reward: 0  // 预计奖励
        }
      },
      goodsList: [],
      page: 1,
      hasMore: true,
    })
  }

  // 获取用户分销信息
  getGoodsDistributionInfo() {
    getGoodsDistributionInfo({}).then(res => {
      if (res && res.data.success) {
        this.setState({
          userDistributionInfo: res.data.data
        })
      }
    })
  }
  // 获取分销列表
  getGoodsDistribution() {
    let { goodsList, page, hasMore } = this.state
    if (!hasMore) {
      return
    }
    getGoodsDistributionIndex({
      query: {
        "perPage": 10, page
      }
    }).then(res => {
      if (res && res.data.success) {
        const MAX_PAGE = res.header['X-Pagination-Page-Count']
        goodsList = [...goodsList, ...res.data.data]
        this.setState({
          goodsList,
          page: page + 1,
          hasMore: page < MAX_PAGE
        })
      }
    })
  }

  // 跳转商品详情
  goGoodsDetails(goods) {
    let IS_USERINFO = Taro.getStorageSync('IS_USERINFO')
    let STORE_LOCATION = Taro.getStorageSync('STORE_LOCATION')
    let url = `/pages/goods/details/index?id=${goods.goodsId}&storeCode=${STORE_LOCATION.storeCode}&shareType=0&goodsDistributionId=${goods.id}&isDistribution=1&isStaff=0&mobile=${IS_USERINFO.mobile}&mobile2=`
    Taro.navigateTo({ url })
  }

  render() {
    const { userDistributionInfo: { banner, statis }, goodsList } = this.state
    const scrollStyle = {
      height: '100vh'
    }

    return (
      <ScrollView
        className="page"
        scrollY
        enableBackToTop
        refresherThreshold={100}
        style={scrollStyle}
        onScrollToLower={
          this.getGoodsDistribution.bind(this)
        }
      >
        {/* 头部信息 */}
        <View className="head-block">
          <Image className="head-img" src={banner.image} />

          <View className="head-info">
            <View>
              <View className="headline">成交金额</View>
              <View>
                ￥<Text className="text">{statis.amount}</Text>
              </View>
            </View>
            <View>
              <View className="headline">成交订单</View>
              <View>
                <Text className="text">{statis.number}</Text>单
            </View>
            </View>
            <View>
              <View className="headline">预计奖励</View>
              <View>
                ￥<Text className="text">{statis.reward}</Text>
              </View>
            </View>
          </View>
        </View>
        {/* 分销列表 */}
        <View className="list-block">
          {
            goodsList && goodsList.length > 0 && goodsList.map(item => {
              return (
                <View className="list-item" key={item.id} onClick={() => { this.goGoodsDetails(item) }} >
                  <Image className="item-img" src={item.goodsThumbnail} />
                  <View className="item-info">
                    <View className="goods-name">{item.goodsName}</View>
                    <View className="selling-price">￥{item.salePrice} <Text className="del">￥{item.originalPrice}</Text></View>
                    <View className="operation-block">
                      <View className="make-money">成交后赚￥{item.directlyCommissionPrice}</View>
                      <View className="btn">推广 <Image lazyLoad className='share-img' src={shareUrl} /></View>
                    </View>
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className="page-base">已经到底了~</View>
      </ScrollView >
    )
  }
}
